<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>盒子模型</title>
	<style type="text/css">
	*{
		padding: 0;
		margin:0;
	}
	.box{
		width: 200px;
		height: 300px;
		padding: 20px 30px;
		margin: 30px;
		background-color: #31BB1F;
		border:20px solid red;
	}
	.box2{
		width: 200px;
		height: 300px;
		background-color: #E81F1F;
		border:20px solid #1A841A;
		padding: 20px 30px 40px;
		margin: 30px 40px;
	}
	.box3{
		width: 300px;d
		height: 300px;
		border:30px solid #A349A4;
		padding:20px 30px 40px;
		margin: 30px 40px 60px;
		background-color: #59C8E6;
		display: inline-block;
		overflow: hidden;
	}
	.box4{
		width: 300px;d
		height: 300px;
		border:30px solid #A349A4;
		padding:20px 30px 40px;
		margin: 30px 40px 60px;
		background-color: #59C8E6;
		display: inline-block;
		overflow: hidden;
	}
	</style>
</head>
<body>
	<div class="box">这是一个盒子啊</div>
	<div class="box2">这是第二个盒子啊啊啊啊mmmmmmmm</div>
	<div class="box3">很多的字.......................................................................................................................................................................................................</div>
	<div class="box4">很多的字.......................................................................................................................................................................................................</div>
</body>
</html>